<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        1.事件的绑定方式
            （1）通过元素的属性绑定     on***
            （2）通过DOM编程动态绑定    
        
            注意事项
                (1)一个时间可以同时绑定多个函数
                (2)一个元素可以同时绑定多个事件
        
        2.常见的事件
            (1)鼠标事件     onclick(单击) ondbclick(双击) onmouseover(悬停) onmousemove(移动) onmouseleave(离开)
            (2)键盘事件     onkeydown(按下) onkeyup(抬起)
            (3)表单事件     onfocus(获得焦点) onblur(失去焦点) onchange(内容改变) onsubmit(提交表单事件) onreset(重置表单事件)
            (4)页面加载事件 onload(页面加载完毕事件)
        3.事件的触发
            (1)行为触发
            (2)DOM编程触发
        */  
    </script>
    <script>
    window.onload=function (){
        //为div1绑定单机事件
        var div1=document.getElementById("d1")
        div1.onclick=function (){
        div1.style.backgroundColor="red"
        }
        //方法一
        // function ready(){
        //     //通过dom编程获得要操作的元素
        // var btn=document.getElementById("btn1")
        // //绑定一个单击事件
        // btn.onclick=function onClick(){
        //         alert("单击了")
        //     }
        // }
        //通过dom编程获得要操作的元素
        //方法二
        
        var btn=document.getElementById("btn1")
        //绑定一个单击事件
        btn.onclick=function onClick(){
                alert("单击了")
                //通过dom编程触发事件，相当于某些事件发生了
                //触发div的单击事件
                div1.onclick()
            }
        }
    
        
    </script>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body><!--onload="ready()"-->
    <button id="btn1">按钮</button>
    <div id="d1" class="div1">

    </div>
</body>
</html>